<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['official:swiper:add']"
          >新增</el-button
        >
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="title" label="标题"> </el-table-column>
      <el-table-column prop="QRCode" label="二维码">
        <template slot-scope="scope">
            <div id="qrcodeArea">
                 <QrCodeImg
                     :qrid="scope.row.id+''"
                     :qrContent= "downloadApi+(scope.row.url.substring(scope.row.url.lastIndexOf('/'),scope.row.url.length))"
                     :qrHeight="qrHeight"
                     :qrWidth="qrWidth"
                 />
            </div>
        </template>
        <!--                            :qrContent="baseURL + '/app/video'+(scope.row.url.substring(scope.row.url.lastIndexOf('/'),scope.row.url.length))"-->
      </el-table-column>
      <el-table-column prop="url" label="视频说明"> </el-table-column>
      <el-table-column prop="createTime" label="上传时间"> </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-search"
            @click="handleUpdate(scope.row)"
            >查看</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['device:video:del']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增 -->
    <el-dialog title="添加视频" :visible.sync="open" width="30%" append-to-body v-loading="loading">
      <el-form ref="form" :model="form" :rules="rules" label-width="auto">
        <el-row>
          <el-col :span="24">
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="视频">
              <el-upload
                class="upload-demo"
                action="#"
                :limit="1"
                :show-file-list="true"
                ref="upload_projectVideo"
                :auto-upload="false"
                :http-request="function (file) {return submitProjectVideo(file)}"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getVideoTutorial,delVideoTutorial } from "@/api/device/videoTutorial";
import QrCodeImg from "./QrCodeImg.vue"
import { MessageBox } from 'element-ui';

export default {
  name: "videoTutorial",
  components: {
    QrCodeImg
  },
  props: [],
  created() {},
  mounted() {
    this.getVideoTutorial()
  },
  data() {
    return {
      loading:false,
      baseURL: process.env.VUE_APP_DOWNLOAD_API,
      downloadApi: 'http://39.99.148.209:8881/app/video/',
      qrWidth: 70,
      qrHeight: 70,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        title: [
          { required: true, message: "标题不能为空", trigger: "blur" },
        ],
      },
      // 是否显示弹出层
      open: false,
      projectVideoFile:'',
      tableData: [],
    };
  },
  watch: {
    value: {
      handler(val) {},
    },
  },
  computed: {},
  methods: {
    handleUpdate(row){
        window.open(this.baseURL+ '/app/video/'+(row.url.substring(row.url.lastIndexOf('/'),row.url.length)));

    },
    //删除视频教程
    handleDelete(row){
      MessageBox.confirm('此操作将永久删除该文件，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delVideoTutorial({id:row.id}).then((res)=>{
          if(res.code == 200 ){
            this.$modal.msgSuccess("删除成功");
            this.getVideoTutorial()
          }
        })
      }).catch(() => {
        // 用户点击“取消”
        console.log("已取消");
      });
    },
    //查询视频教程List
    getVideoTutorial(){
        getVideoTutorial().then((res)=>{
            this.tableData = res.data
        })
    },
     /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          let postUrlImg = '/videoTutorial/uploadVideoTutorial'
          this.$refs.upload_projectVideo.submit()
          if(this.projectVideoFile)
          {
            let formData = new FormData()
            formData.append('multipartFile', this.projectVideoFile)
            formData.append('title', this.form.title)
            this.loading = true
            await uploadFuncAwait(postUrlImg, formData).then((res)=>{
                if(res.data.code == 200){
                 this.$modal.msgSuccess("新增成功");
                 this.loading = false
                 this.open = false
                 this.getVideoTutorial()
            }else{
                 this.$modal.msgError("新增失败");
                 this.loading = false
            }

            })
          }

        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {

      };
      this.projectVideoFile = ""
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset();
      this.open = true;
      this.$refs.upload_projectVideo.clearFiles()
    },
    /**
     * 获取上传路径
     * @param file
     */
    submitProjectVideo(file) {
      this.projectVideoFile = file.file;
    },
  },
};
</script>
<style scoped></style>
